import React, { useEffect, useRef, useState } from "react";
import { ASSETSLICEYUPE, STRING, ASSETSLIST } from "./typeing";
import type { PaginationProps } from "antd";
import instance from "@/request";
import styles from "./index.module.less";
import { Button, Form, Select, Modal, Table, Row, Col } from "antd";
const { Option } = Select
const AssetsSlice: React.FC = () => {
    const [form] = Form.useForm()
    const [modalOpen, setModalOpen] = useState(false)
    const project = useRef()
    const date = useRef()
    const pages = useRef(1);
    const pageSizes = useRef(20);
    const [searchInfo, setSearchInfo] = useState<ASSETSLICEYUPE>();
    const [assetPlanidList, setAssetPlanidList] = useState<STRING[]>()
    const [sliceDate, setSliceDate] = useState<STRING[]>();
    useEffect(() => {
        form.setFieldsValue({
            project: assetPlanidList && assetPlanidList[0],
            date: sliceDate && sliceDate[0]
        })
    }, [sliceDate, assetPlanidList])
    const getAssetPlanid = async () => {
        const response: any = await instance.post("/adc/asset_planid")
        getReportDate(response[0])
        project.current = response[0]
        setAssetPlanidList(response);
    }
    const getReportDate = async (value: STRING) => {
        const response: any = await instance.post('/adc/asset_planid_to_reportdate', { plan_code: value });
        setSliceDate(response)
        date.current = response[0]
        handleSearch()
    }
    useEffect(() => {
        getAssetPlanid()
    }, [])
    const handleSearch = async () => {
        const response: any = await instance.post(
            "/adc/get_asset_slice_list_page",
            {
                plan_code: project?.current,
                report_date_id: date?.current,
                page: pages.current,
                offset: pageSizes.current,
            }
        );
        setSearchInfo(response)
    }
    const pagination: PaginationProps = {
        total: searchInfo?.total,
        current: pages.current,
        pageSize: pageSizes.current,
        onChange: (page, pageSize) => {
            pages.current = page
            pageSizes.current = pageSize
            handleSearch()
        },
    };
    const [sliceList, setSliceList] = useState<{ [x: STRING]: STRING }[]>()
    const getDetailList = async (AccountNo: STRING, ReportDateId: number) => {
        const response: any = await instance.post(
            "/adc/get_asset_slice_detail_page",
            {
                AccountNo,
                ReportDateId,
            }
        );
        const customerArray: { [x: STRING]: STRING; }[] = [];
        for (const key in response[0]) {
            customerArray.push({ [key]: response[0][key] });
        }
        setSliceList(customerArray);
    };
    const columns = [
        {
            title: '借据号',
            dataIndex: 'AccountNo',
            key: 'AccountNo',
            render: (text: STRING, record: ASSETSLIST) => {
                return <Button type="link" onClick={() => {
                    setModalOpen(true)
                    getDetailList(record.AccountNo, record.ReportDateId)
                }}>
                    {text}
                </Button>
            }
        },
        {
            title: '资产计划代码',
            dataIndex: 'TrustCode',
            key: 'TrustCode'
        },
        {
            title: '客户ID',
            dataIndex: 'CustomerCode',
            key: 'CustomerCode'
        },
        {
            title: '产品类型',
            dataIndex: 'ProductName',
            key: 'ProductName'
        },
        {
            title: '分期期数',
            dataIndex: 'LoanTerm',
            key: 'LoanTerm'
        },
        {
            title: '放款时间',
            dataIndex: 'LoanReleaseDate',
            key: 'LoanReleaseDate'
        },
        {
            title: '年化利率',
            dataIndex: 'AnnualInterestRate',
            key: 'AnnualInterestRate'
        },
        {
            title: '贷款本金(元)',
            dataIndex: 'LoanPrincipal',
            key: 'LoanPrincipal'
        },
        {
            title: '剩余本金(元)',
            dataIndex: 'RemainingPrincipal',
            key: 'RemainingPrincipal'
        },
        {
            title: '信托计划名称',
            dataIndex: 'TrustName_DXM',
            key: 'TrustName_DXM'
        },
        {
            title: '报表日期 ID',
            dataIndex: 'ReportDateId',
            key: 'ReportDateId'
        }
    ]
    return (
        <div className={styles.assetsSlice}>
            <Form className="layoutContainer__form" form={form} onFinish={handleSearch}>
                <Form.Item label={<b>{'项目代码'}</b>} name='project'>
                    <Select className="layoutContainer__item" onChange={(value) => project.current = value}>
                        {
                            assetPlanidList && assetPlanidList.map((item) => {
                                return <Option value={item} key={item}>{item}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item label={<b>{'切片日期'}</b>} name={'date'}>
                    <Select className="layoutContainer__item" onChange={(value) => date.current = value}>
                        {
                            sliceDate && sliceDate.map((item) => {
                                return <Option value={item} key={item}>{item}</Option>
                            })
                        }
                    </Select>
                </Form.Item>
                <Form.Item>
                    <Button htmlType='submit' type='primary' onClick={() => handleSearch()}>{'查询'}</Button>
                </Form.Item>
            </Form>
            <Table
                dataSource={searchInfo?.data}
                columns={columns}
                pagination={{ ...pagination }}
                bordered
            />
            <Modal
                open={modalOpen}
                onCancel={() => setModalOpen(false)}
                footer={null}
                width={'80%'}
            >
                <div className={styles.assetsSlice__content}>
                    <Row>
                        {
                            sliceList && sliceList.map((item) => {
                                const entries: [STRING, STRING][] = Object.entries(item);
                                return <Col span={8}>
                                    {<b>{entries[0][0]}</b>}
                                    {'：'}
                                    {entries[0][1]}
                                </Col>
                            })
                        }
                    </Row>
                </div>
            </Modal>
        </div>
    );
};

export default AssetsSlice;
